<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {margin: 0}
canvas {
    background-color: #000;
    max-width: 100%;
}
</style>
</head>
<body>
<div id="rs"></div>
<img src="" id="preview"/>

<div id="a" style="position:absolute; top:100px; left:0; width:300px; height:400px;"></div>

<div id="b" style="position:absolute; top:100px; left:700px; width:600px; height:400px;"></div>



<script src="../ImageClip.js"></script>
<script>
var imgClip = new ImageClip({
    canvasWidth: 600,
    canvasHeight: 400,
    maskStyle: 'rgba(0, 0, 0, .6)',
    clipWidth: 200,
    clipHeight: 200
});
imgClip.render(document.getElementById('a'), './foo.jpg');

var rs = document.getElementById('rs');
var preview = document.getElementById('preview');
imgClip.onChange = function(d) {
    rs.innerHTML = 'x: ' + d.x
        + '<br />y: ' + d.y
        + '<br />w: ' + d.w
        + '<br />h: ' + d.h

    //preview.src = imgClip.getPreview();
}



var imgClip2 = new ImageClip({
    canvasWidth: 600,
    canvasHeight: 400,
    maskStyle: 'rgba(0, 128, 0, .4)',
    clipWidth: 200,
    clipHeight: 200
});
imgClip2.render(document.getElementById('b'), './bar.jpg');
</script>
</body>
</html>
